<template>
  <div id="app">
    <div class="layout-demo-2-vue" style="height: 100%;">
      <Layout :headerFixed="headerFixed" style="height: 100%;" class="layout-radius">
        <HHeader onmousedown="DropMoveCall()" v-bg-color:green v-color:white>
          <div style="display:inline-block;font-size:12px;" >御龙 RUST - 管理面板</div>
          <div id="win-button" class="float-right">
            <div id="item" onclick="winMin()" style="position:relative;top:-2px;" title="最小化">0</div>
            <div id="item" onclick="winClose()" title="关闭">r</div>
          </div>
        </HHeader>
        <Layout :siderFixed="siderFixed" :siderCollapsed="siderCollapsed" class="layout-radius-bottom">
          <Sider theme="white">
            <Menu className="h-menu-white" ref="menu" @select="select" :datas="menuDatas" :inlineCollapsed="siderCollapsed"></Menu>
          </Sider>
          <Content style="display:flex;flex-direction: column;overflow-y: auto;">
            <router-view />
            <HFooter class="text-center" style="height:60px;">Copyright © {{year}}
              <a href="#" target="_blank">Neeco</a>
            </HFooter>
          </Content>
        </Layout>
      </Layout>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      menuSelectTitle: '',
      year: '2021-' + (new Date()).getFullYear(),
      headerFixed: false,
      siderFixed: false,
      siderCollapsed: false,
      menuDatas: [
        { title: '登 录', key: 'Home', icon: 'fas fa-home' },
        {
          title: '服务器管理', key: 'server', icon: 'fas fa-laptop', children: [
            { title: '服务器列表', key: 'server-list',icon:'fas fa-cube' },
            // { title: '创建新服务器', key: 'server-create', icon: 'fas fa-plus' },
          ]
        },
        // {
        //   title: '用户管理', key: 'user', icon: 'fas fa-users', children: [
        //     { title: '用户列表', key: 'user-list', icon: 'fas fa-bars' },
        //     { title: '创建新用户', key: 'user-create', icon: 'fas fa-plus' },
        //   ]
        // },
        // { title: '终端', icon: 'fas fa-terminal', key: 'terminal' },
         { title: '文件管理', icon: 'fas fa-box-open', key: 'filemanage' },
        { title: '插件管理', icon: 'fas fa-laptop-code', key: 'plugin' },
        // { title: '设 置', icon: 'fas fa-tools', key: 'setting' }
      ],
      datas: [
        { icon: '' },
        { title: '' },
      ]
    };
  },
  mounted: function () {
    this.$API.interceptors(this.$router)
    this.$file.interceptors(this.$router)
    //this.datas[0].icon = this.menuDatas[0].icon
    //this.datas[1].title = this.menuDatas[0].title
    this.$nextTick(function () {
      this.$refs.menu.select(this.$route.name);
    })
  },
  watch: {
    headerFixed() {
      if (!this.siderFixed) {
        this.headerFixed = false;
      }
    },
    $route() {
      if (this.$route.name) {
        console.warn(this.$route.name)
        //router的name与menu的key对应
        this.$refs.menu.select(this.$route.name)
      }
    }
  },
  methods: {
    select(data) {
      this.datas[0].icon = data.icon
      this.datas[1].title = data.title
      // console.log(data)
      this.$router.push({ name: data.key });
    }
  }
}
</script>

<style lang="less">
html,body{overflow: hidden;}
@BORDER-RADUIS:5px;
#win-button{
  color: #fff;
  display: flex;
  #item{
    cursor: pointer;
    font-weight: 400;
    // background: red;
    color: rgba(0, 0, 0, 0.6);
    padding:0 10px;
    font-family: Webdings;
    transition: 0.3s;
    &:hover{
      color: rgba(0, 0, 0, 0.2);
    }
  }
}
#app{
  color: rgb(144,147,153);
  // border:solid 1px green;
  overflow: hidden;
  background: none;
  border-radius: @BORDER-RADUIS;
  box-shadow: 1px 1px 6px 3px rgba(0, 0, 0, 0.1);
  .h-layout-header{
    height: 40px;
    line-height: 40px;
    padding:0 15px;
    padding-right: 8px;
    background: linear-gradient(to right,rgb(39,191,156),rgb(30, 235, 187));
    border-radius: @BORDER-RADUIS @BORDER-RADUIS 0 0;
  }
  .layout-radius{
    border-radius: @BORDER-RADUIS
  }
  .layout-radius-bottom{
    background:#f0f2f5;
    border-radius: 0 0  @BORDER-RADUIS @BORDER-RADUIS
  }
}
.h-menu-mode-normal .h-menu-show-icon {
  font-size: 16px;
  // color: #2a3038;
}
.h-menu-white .h-menu-li {
  color: #2a3038;
}
.h-breadcrumb {
  padding-bottom: 10px;
  // border-bottom: solid 1px rgba(0, 0, 0, 0.04);
}
.layout-demo-2-vue {
  .h-layout {
    // background: #f0f2f5;
  }
  .h-layout-content{
    padding:10px;
    // overflow-y:auto
  }
  .h-layout-sider {
    // border-right: solid 1px rgba(0, 0, 0, 0.06);
  }
  .layout-logo {
    // width: 140px;
    // padding: 30px;
    // padding-top:30px;
    // border-bottom: solid 1px rgba(0, 0, 0, 0.06);
    // height: 50px;
    // background: rgba(255, 255, 255, 0.2);
    // margin: 16px 24px 16px 0;
    // float: left;
    display: flex;
    align-items: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .h-layout-header {
    // border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    // background: rgb(40, 40, 40);
    // padding: 10px 50px;
  }

  .h-layout-footer {
    padding: 24px 50px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
  }
}
</style>
